/**
* 伪元素1px
 */
.mixin-one-px(@clolor:#ccc) {
  content: ' ';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  background: @clolor;
  transform-origin: 0 0;
  transform: scaleY(0.5);
}
// 省略号

.mixin-one-ine() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mixin-other-line(@num) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: @num;

  /* autoprefixer: off */
  -webkit-box-orient: vertical;
}

// 清除浮动
.mixin-clearfix {
  &::after {
    clear: both;
    content: '';
    display: block;
  }
}

/**
 * 通用的遮罩
 */
.mixin-overlay (@color:#000,@alpha: 0.3) {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: rgba(@color, @alpha);
}

/***
* 背景图片地址和大小
 */
.mixin-bis(@url, @custom: 100%, @position: center) {
  background-image: url(@url);
  background-repeat: no-repeat;
  background-position: @position;
  background-size: @custom;
}

/**
*flex子元素
 */

.mixin-flex-space (@space: center) {
  display: flex;
  align-items: center;
  justify-content: @space;
}
//定位上下左右居中
.mixin-center(@position:absolute) {
  position: @position;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

//宽高
.mixin-wh(@width, @height) {
  width: @width;
  height: @height;
}

//字体大小，颜色
.mixin-sc(@size, @color) {
  font-size: @size;
  color: @color;
}

.mixin-flex-column {
  display: flex;
  flex-direction: column;
}
//  font-size适配
.mixin-font-dpr(@fz){
  font-size: @fz;
  [data-dpr="2"] & {
      font-size: @fz * 2;
  }

  [data-dpr="3"] & {
      font-size: @fz * 3;
  }
}